<template>
  <div>
    <el-card class="box-card" style="width: 40%">
      <h1 style="text-align: center">欢迎使用共享存储柜</h1>
      <hr>
      <br>
      <div>
        <h4 style="text-align: center">费用信息:</h4>
        <br>
        <div>
          <span>前8小时收取{{ price.initCost }}元，</span>
          <span>8-24小时收取{{ price.baseCost }}元，</span>
          <span>24小时后，每小时加收{{ price.addCost }}元</span>
        </div>

      </div>
      <hr>
      <br>
      <h2 style="text-align: center">存储物品</h2>
      <div style= "padding: 50px 30px" >
        <el-form :model="putForm" ref="form" :rules="rules">
          <el-form-item prop="cabId">
            存储柜id<el-input v-model="putForm.cabId" placeholder="请输入存储柜id" clearable></el-input>
          </el-form-item>
          <el-form-item prop="boxId">
            存储箱id<el-input v-model="putForm.boxId" placeholder="请输入存储箱id" clearable></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="put">开箱</el-button>
          </el-form-item>
        </el-form>
        <el-from :model="openPw">
          开箱密码：<el-input v-model="openPw" type="text" disabled></el-input>
        </el-from>
<!--        <el-button type="primary" @click="getUserId">获取user.id</el-button>-->
<!--        <el-button type="primary" @click="createOrderings">生成订单</el-button>-->
<!--        <el-form ref="form" :model="oid" label-width="80px">-->
<!--&lt;!&ndash;          oid<el-input v-model="oid" placeholder="placeholder"></el-input>&ndash;&gt;-->
<!--        </el-form>-->

        <hr>
        <br>
        <h2 style="text-align: center">取出物品</h2>
        <el-form :model="formOpen">
          <el-form-item prop="cabId">
            存储柜id<el-input v-model="formOpen.cabId" placeholder="请输入存储柜id" clearable></el-input>
          </el-form-item>
          <el-form-item prop="boxId">
            存储箱id<el-input v-model="formOpen.boxId" placeholder="请输入存储箱id" clearable></el-input>
          </el-form-item>
          <el-form-item prop="cabId">
            开箱密码<el-input v-model="formOpen.openPw" placeholder="请输入开箱密码(6位数字)" clearable></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="take">开箱</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-card>
  </div>
<!--  <div>-->
<!--    <el-card class="box-card" style="width: 40%">-->
<!--      这是价格-->
<!--    </el-card>-->
<!--    </div>-->
</template>

<script>
import request from "@/utils/request";
import { ElMessage } from 'element-plus'
export default {
  name: "UseShare",
  data() {
    return {
      // 创建订单的form
      createForm:{
        cabId: "",
        boxId: "",
        uid: "",
      },
      // 存储开箱的form
      putForm:{
        cabId: "",
        boxId: "",
        uid: "",
      },
      formOpen:{
        openPw: "",
        cabId:"",
        boxId:""
      },
      openPw:"",
      price:{},
      rules:{
        cabId:[{required:true,message:"请输入存储柜ID号",trigger:blur}],
        boxId:[{required:true,message:"请输入存储箱ID号",trigger:blur}],
      }
    }
  },

  methods:{
    //  生成订单，返回开箱密码、订单号oid
    createOrderings() {
      // 获取当前user的id，存入生成订单的表单中
      let name = sessionStorage.getItem("user")
      this.createForm.uid = JSON.parse(name).id
      // 获取开箱表单中的 cabId,boxId 存入生成订单的表单中
      this.createForm.cabId = this.putForm.cabId
      this.createForm.boxId = this.putForm.boxId
      // 获取当前user的id，存入开箱的表单中
      this.putForm.uid = JSON.parse(name).id
      request.post("/orderings", this.createForm).then(res => {
        if (res.data.code === '0') {
          console.log(res.data)
          // 生成订单成功，返回开箱密码
            this.openPw = res.data.data.data.openPw
        }
      })
    },
    put() {
      this.createOrderings()
      request.post("/box/toPut",this.putForm).then(res =>{
        if (res.data.code === '0'){
          ElMessage({
            message: '开箱成功，请存储物品并及时关门。',
            type: 'success',
          })
        } else {
          ElMessage.error(res.data.msg)
        }
      })
    },

    take() {
      request.post("/box/toTake",this.formOpen).then(res =>{
        if (res.data.code === '0'){
          ElMessage({
            message: res.data.data,
            type: 'success',
          })
        }else {
          ElMessage.error(res.data.msg)
        }
      })
    },

    getPrice(){
      request.get("/orderings/getPrice").then(res =>{
        this.price = res.data
      })
    },
    },
  created() {
    this.getPrice();
  }
}


</script>

<style scoped>

</style>
